<template>
  <div class="content-main">
    <div class="short-video">
      <div class="videos">
        <vue-core-video-player
          :src="dataList[currentWorksIndex].videoPath"
          :cover="dataList[currentWorksIndex].coverPath"
          :title="dataList[currentWorksIndex].authorName"
          autoplay
          :loop="true"
        />
      </div>
      <div class="open-comment">
        <el-button
          type="text"
          icon="el-icon-arrow-left"
          class="btn-left"
          @click="turnComment()"
        ></el-button>
      </div>
      <div
        class="comment-drawer"
        style="position: relative"
        v-show="commentary"
      >
        
        <el-drawer
          title="我是标题"
          :size="size"
          class="drawer-content"
          :visible.sync="drawer"
          :with-header="false"
          :append-to-body="true"
          :before-close="handleClose"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <div>
            <el-tabs
              class="drawer-tabs"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="TA的作品" name="first">
                <Production
                  :dataList="allWorksList"
                  :friendId="dataList[this.currentWorksIndex].userId"
                  :userSimpleInfo="userSimpleInfo"
                ></Production>
              </el-tab-pane>
              <el-tab-pane label="评论" name="second">
                <videoCommentary
                  :worksId="dataList[this.currentWorksIndex].worksId"
                  :commentCount="dataList[this.currentWorksIndex].commentCounts"
                ></videoCommentary
              ></el-tab-pane>
            </el-tabs>
          </div>
        </el-drawer>
      </div>
    </div>
    <div class="command-button">
      <div>
        <div>
          <el-button
            type="text"
            icon="el-icon-arrow-up"
            class="btn-up"
            @click="prevWorks()"
          ></el-button>
        </div>
        <div>
          <el-button
            type="text"
            icon="el-icon-arrow-down"
            class="btn-down"
            @click="nextWorks()"
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["dataList"],
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.content-main {
  background: #161823;
  width: 100%;
  height: 100%;
  /* height: 625px; */
  display: flex;
}
.short-video {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  /* background: #fff; */
}
.videos {
  flex: 1;
  height: 94%;
  z-index: 0;
  margin-left: 24px;
  /* border: 1px solid red; */
}
.command-button {
  align-items: center;
  display: flex;
  text-align: center;
  justify-content: center;
  /* position: fixed; */
  width: 50px;
  top: 50%;
  right: 10px;
}
.btn-up,
.btn-down {
  width: 40px;
  height: 40px;
  background: #343540;
  font-weight: bold;
}
.btn-up:hover,
.btn-down:hover {
  background: #343540;
}
.btn-up .el-icon-arrow-up:before,
.btn-down .el-icon-arrow-down:before {
  font-weight: bolder;
  color: rgb(138, 138, 138);
}
.btn-up:hover .el-icon-arrow-up:before,
.btn-down:hover .el-icon-arrow-down:before {
  font-weight: bolder;
  color: #fff;
}

.btn-up {
  border-radius: 20px 20px 0 0;
}
.btn-down {
  border-radius: 0 0 20px 20px;
}
.open-comment {
  position: absolute;
  background: #34363a;
  width: 30px;
  height: 40px;
  text-align: center;
  border: 1px solid #e7e7e7;
  right: 52px;
  border: 1px solid #6b6969;
  border-right: 1px solid #34363a;
  border-radius: 20px 0 0 20px;
  transition: ease 1s;
}
.btn-left .el-icon-arrow-left:before {
  font-weight: bold;
  color: rgb(138, 138, 138);
}
.open-comment:hover {
  transform: scale(1.2);
  color: #fff;
}
.comment-drawer {
  /* position: relative; */
  width: 380px;
  height: 537px;
  /* display: none; */
}
.comment-drawer .el-drawer.ltr {
  width: 24% !important;
}
.el-drawer__wrapper .el-drawer__container .el-drawer.ltr,
.el-drawer__wrapper .el-drawer__container .el-drawer.rtl {
  margin-top: 87px;
  background: #3a393e;
  color: #fff;
  right: 53px;
  /* height: 547px; */
}
.drawer-content .el-drawer__header {
  border-bottom: 1px solid #4a4a4a !important;
  /* padding: 20px 20px 0; */
  margin-bottom: 0px;
  padding: 15px !important;
}
.drawer-content .el-drawer__body > div {
  height: 100%;
}
.drawer-content .el-drawer__body {
  height: 100%;
}
.drawer-content .el-drawer__container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 85%;
  width: 100%;
}
.el-drawer__body::-webkit-scrollbar {
  display: none;
}
.drawer-content .el-tabs__item.is-active {
  color: #fff;
}
.drawer-content .el-tabs__item {
  font-weight: 600;
  color: #959595;
  box-sizing: border-box;
}
.drawer-content .el-tabs__nav-scroll {
  padding: 0px 10px;
}
.drawer-content .el-tabs__header {
  margin: 0;
  height: 40px;
  padding: 5px 0;
}
.drawer-content .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #464646;
}
.drawer-content .el-tabs {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.drawer-tabs .el-tabs__content {
  flex: 1;
  flex-direction: column;
}
</style>

